<template>
  <div class="agentList divBox">
    <el-card class="box-card" shadow="hover">
      <template class="clearfix" v-slot:header>
        <el-button size="small" type="primary" icon="el-icon-plus"
          @click="addActivitie">添加活动</el-button>
        <el-tooltip :disabled="!disabled" class="ml10" effect="dark" content="本页至少选择一项"
          placement="bottom">
          <div style="display: inline-block">
            <el-button :disabled="disabled" size="small" icon="el-icon-s-release" type="primary"
              @click="showActivitieAll(0)">批量隐藏活动</el-button>
          </div>
        </el-tooltip>
        <el-tooltip :disabled="!disabled" class="ml10" effect="dark" content="本页至少选择一项"
          placement="bottom">
          <div style="display: inline-block">
            <el-button :disabled="disabled" size="small" icon="el-icon-s-claim" type="primary"
              @click="showActivitieAll(1)">批量显示活动</el-button>
          </div>
        </el-tooltip>
        <el-tooltip :disabled="!disabled" class="ml10" effect="dark" content="本页至少选择一项"
          placement="bottom">
          <div style="display: inline-block">
            <el-button :disabled="disabled" size="small" icon="el-icon-close" type="primary"
              @click="delectAll">批量删除活动</el-button>
          </div>
        </el-tooltip>
      </template>
      <el-table v-loading="disLoading" :data="tableActivityList" style="width: 100%" size="mini"
        class="table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" min-width="55"></el-table-column>
        <el-table-column prop="id" label="ID" align="center" min-width="135"></el-table-column>
        <el-table-column prop="name" label="活动名称" align="center" min-width="120"></el-table-column>
        <el-table-column prop="urlLink" label="活动链接" align="center"
          min-width="120"></el-table-column>
        <el-table-column prop="domainLink" label="活动域名" align="center"
          min-width="120"></el-table-column>
        <el-table-column label="活动封面" min-width="100">
          <template slot-scope="{ row }">
            <div class="taoBox_img" v-viewer>
              <img v-lazy="$uploadURL(row.image)" :alt="$uploadURL(row.image)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="登陆封面" min-width="100">
          <template slot-scope="{ row }">
            <div class="taoBox_img" v-viewer>
              <img v-lazy="$uploadURL(row.image_Login)" :alt="$uploadURL(row.image_Login)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sliderImage" label="轮播图" align="center" min-width="160">
          <template slot-scope="{ row }">
            <div class="taoBoxs_img" v-viewer v-if="row.sliderImage">
              <template v-for="image in row.sliderImage.split(',')">
                <img v-lazy="$uploadURL(image.trim())" :key="image" :alt="image" />
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="videos" label="视频" align="center" min-width="160">
          <template slot-scope="{ row }">
            <div class="taoBoxs_img" v-if="row.videos">
              <template v-for="video in row.videos.split(',')">
                <video :src="$uploadURL(video)" class="avatar video-avatar" controls="controls">
                  您的浏览器不支持视频播放
                </video>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="简介" align="center"
          min-width="120"></el-table-column>
        <el-table-column prop="rule" label="规则" align="center" min-width="120"></el-table-column>
        <el-table-column prop="isShow" label="是否显示活动" align="center" min-width="120">
          <template slot-scope="{ row }">
            <div>
              {{ row.isShow ? "显示" : "隐藏" }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="230" fixed="right" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="edit(row.id)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" size="small" @click="delActivitie(row.id)">删除</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" size="small"
              @click="operantActivity(row.id,row.name)">管理活动</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown class="ml10" placement="bottom">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="showActivitie(row)">{{ row.id == 1 ? "显示活动" : "隐藏活动" }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="spreadBox">
        <pagination v-show="pagination.total > 0" :total="pagination.total"
          :page.sync="pagination.page" :limit.sync="pagination.limit" :page-sizes="[10, 20, 30, 50]"
          @pagination="replyChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { setRouteId } from '@/utils/auth';
import {
  getActivitieListApi,
  activitieDeleteApi,
  patchActivitieApi,
} from '@/api/activity';
export default {
  name: 'Index',
  data() {
    return {
      grid: {
        xl: 5,
        lg: 7,
        md: 12,
        sm: 12,
        xs: 24,
      },
      disForm: {
        keyword: '',
        roleId: '',
      },
      pagination: {
        page: 1,
        limit: 10,
        total: 100,
      },
      tableActivityList: [],
      del: [],
      disLoading: false,
      disabled: true,
    };
  },
  beforeCreate() {},
  mounted() {
    this.getActivityList();
  },
  computed: {
    ...mapGetters(['customRouter']),
  },
  methods: {
    // 添加活动
    addActivitie() {
      console.log('添加活动', `${this.customRouter}/activity/activity_add`);
      this.$router.push({ path: `${this.customRouter}/activity/activity_add` });
    },
    // 管理活动
    operantActivity(id, name) {
      console.log('setSelectedId', id);
      this.$store.commit('activity/SET_SELECTED_ID', id);
      setRouteId(id);
      this.$message.success(`您正在管理${name}活动`);
    },
    /**
     * 行选中时
     */
    handleSelectionChange(val) {
      this.$set(
        this,
        'del',
        val.map((item) => item.id)
      );
      console.log(this.del);
      if (val.length > 0) this.$set(this, 'disabled', false);
      else this.$set(this, 'disabled', true);
    },
    /**
     * 编辑活动
     * id
     */
    edit(id) {
      this.$router.push({
        path: `${this.customRouter}/activity/activity_add`,
        query: { id: id },
      });
    },
    /**
     * 删除
     */
    delActivitie(id) {
      id || (this.del.length !== 0 && !this.disabled)
        ? this.$confirm('删除活动', {
            title: '删除活动',
            message: this.$createElement(
              'div',
              null,
              ['确定要删除活动吗？', '删除活动后将无法恢复，请谨慎操作！'].map(
                (item) => this.$createElement('p', null, item)
              )
            ),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              console.log('删除的id:', id);
              activitieDeleteApi(!id ? `(${this.del.join()})` : id).then(
                (res) => {
                  if (!id && res) return this.$message.warning(res);
                  this.$message.success('删除活动成功！');
                  this.getActivityList();
                }
              );
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除活动',
              });
            })
        : this.$message.warning('请至少选择一条数据');
    },
    // 批量删除
    delectAll() {
      console.log('delectAll', this.del);
      this.delActivitie(!this.del.length ? '' : `${this.del.join()}`);
    },

    /**
     * 是否显示活动
     */
    showActivitie(row, show) {
      let value;
      let ids;
      if (typeof row === 'object') {
        value = row.isShow == 0 ? 1 : 0;
        ids = row.id;
      } else {
        value = show;
        ids = row;
      }
      console.log('value', value);
      console.log('ids', ids);
      patchActivitieApi(
        [
          {
            op: 'replace',
            path: '/isShow',
            value: value,
          },
        ],
        ids
      )
        .then((res) => {
          console.log('修改成功', res);
          this.getActivityList();
          this.$message.success('修改成功');
        })
        .catch(() => {
          this.$message.error('修改失败');
        });
    },
    /**
     * 批量是否显示活动
     */
    showActivitieAll(show) {
      console.log('showActivitieAll,showActivitieAll', show);
      let row = !this.del.length ? '' : `${this.del.join()}`;
      console.log('showActivitieAll', row);
      this.showActivitie(row, show);
    },
    /**
     * 获取活动列表
     */
    getActivityList() {
      getActivitieListApi({
        pageNumber: this.pagination.page,
        pageSize: this.pagination.limit,
        orderby: 'Number desc',
        isShow: 1,
        isDel: -1,
      }).then((res) => {
        this.$set(this, 'tableActivityList', res.data);
        this.pagination.total = res.head ? res.head.totalCount : 0;
      });
    },
    replyChange(reply) {
      this.$set(this.pagination, 'page', reply.page);
      this.$set(this.pagination, 'limit', reply.limit);
      console.log('pagination', this.pagination);
      this.getActivityList();
    },
  },
};
</script>

<style lang="scss" scoped>
.agentList {
  .taoBox_img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .taoBoxs_img {
    // width: 36px;
    // height: 36px;
    border-radius: 4px;
    // overflow: hidden;
    cursor: pointer;

    img {
      margin-right: 5px;
      width: 36px;
      height: 36px;
    }
    video {
      margin-right: 5px;
      width: 50px;
      height: 50px;
    }
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>

<style lang="scss">
.el-dialog.cusDialogCls,
.el-dialog.editAgentDialogCls {
  max-width: 960px;
}

.el-dialog.promotionOrderDialogCls {
  max-width: 900px;
}
</style>